<template>
	<view class="history-container" :style="containerStyle">
		<!-- 顶部标题栏 -->
		<view class="header" :style="{ paddingTop: safeDistance + 'px' }">
			<view class="header-content">
				<text class="header-title">测试结果</text>
				<text class="header-subtitle">我的学习记录</text>
			</view>
			<view class="header-actions">
				<view class="stats-badge" v-if="records.length > 0">
					<text class="stats-text">{{ records.length }}条</text>
				</view>
				<view class="clear-btn-header" v-if="records.length > 0" @click="handleClearAll">
					<text class="clear-icon-header">🗑️</text>
				</view>
			</view>
		</view>

		<!-- 统计概览 -->
		<view class="stats-section" v-if="records.length > 0">
			<!-- 主要统计 -->
			<view class="main-stats">
				<view class="stats-header">
					<text class="stats-title">📊 学习统计</text>
				</view>
				<view class="stats-grid">
					<view class="stat-card">
						<view class="stat-icon">📊</view>
						<view class="stat-info">
							<text class="stat-number">{{ statistics.totalCount }}</text>
							<text class="stat-label">次测试</text>
						</view>
					</view>
					<view class="stat-card highlight">
						<view class="stat-icon">🏆</view>
						<view class="stat-info">
							<text class="stat-number">{{ statistics.bestScore }}</text>
							<text class="stat-label">最高分</text>
						</view>
					</view>
					<view class="stat-card">
						<view class="stat-icon">⭐</view>
						<view class="stat-info">
							<text class="stat-number">{{ statistics.averageScore }}</text>
							<text class="stat-label">平均分</text>
						</view>
					</view>
					<view class="stat-card">
						<view class="stat-icon">📈</view>
						<view class="stat-info">
							<text class="stat-number">{{ statistics.averageAccuracy }}%</text>
							<text class="stat-label">正确率</text>
						</view>
					</view>
				</view>
			</view>

		</view>

		<!-- 记录列表 -->
		<view class="records-section" v-if="records.length > 0">
			<view class="records-list">
				<view 
					v-for="record in records" 
					:key="record.id"
					class="record-card"
					@click="handleViewRecord(record)"
				>
					<view class="card-body">
						<!-- 卡片头部 -->
						<view class="card-header">
							<view class="header-left">
								<view class="record-icon-wrapper">
									<text class="record-icon">{{ getTechIcon(record.techCode) }}</text>
								</view>
								<view class="record-info">
									<text class="record-tech">{{ record.techName }}</text>
									<text class="record-time">{{ record.createTimeStr }}</text>
								</view>
							</view>
							<view class="header-right">
								<view class="score-display">
									<text class="score-number" :class="getScoreClass(record.score)">{{ record.score }}</text>
									<text class="score-label">分</text>
								</view>
								<view class="delete-btn" @click.stop="handleDelete(record.id)">
									<text class="delete-icon">🗑️</text>
								</view>
							</view>
						</view>

						<!-- 主要信息区域 -->
						<view class="main-info">
							<view class="info-row">
								<view class="info-item">
									<text class="info-label">正确率</text>
									<text class="info-value">{{ record.accuracy }}%</text>
								</view>
								<view class="info-item">
									<text class="info-label">用时</text>
									<text class="info-value">{{ formatTime(record.timeUsed) }}</text>
								</view>
								<view class="info-item">
									<text class="info-label">题目</text>
									<text class="info-value">{{ record.totalCount }}题</text>
								</view>
								<view class="info-item" v-if="record.examStatus">
									<text class="info-label">状态</text>
									<text class="info-value">{{ record.examStatus === 'completed' ? '已完成' : '已放弃' }}</text>
								</view>
							</view>
						</view>

						<!-- 答题统计 -->
						<view class="answer-stats">
							<view class="stats-row">
								<view class="stat-item correct">
									<view class="stat-icon-wrapper correct-bg">
										<text class="stat-icon">✓</text>
									</view>
									<text class="stat-count">{{ record.correctCount }}</text>
									<text class="stat-label">正确</text>
								</view>
								<view class="stat-item wrong">
									<view class="stat-icon-wrapper wrong-bg">
										<text class="stat-icon">✗</text>
									</view>
									<text class="stat-count">{{ record.wrongCount || (record.totalCount - record.correctCount) }}</text>
									<text class="stat-label">错误</text>
								</view>
							</view>
						</view>

					
					</view>
				</view>
			</view>
		</view>

		<!-- 底部占位 -->
		<view class="bottom-placeholder"></view>

		<!-- 空状态 -->
		<view class="empty-state" v-if="records.length === 0">
			<view class="empty-content">
				<text class="empty-icon">📝</text>
				<text class="empty-text">暂无测试记录</text>
				<text class="empty-tip">完成测试后，记录会显示在这里</text>
				<button class="empty-btn" @click="handleGoToExam">
					<text class="btn-text">去测试</text>
				</button>
			</view>
		</view>

		<!-- AI助手按钮 -->
		<AiChatButton buttonText="AI助手" />
	</view>
</template>

<script setup lang="ts">
	import { onShow } from '@dcloudio/uni-app';
	import { ref, computed, watch } from 'vue';
	import AiChatButton from '@/components/AiChatButton.vue';
	import { 
		getExamRecordsAPI, 
		deleteExamRecordAPI, 
		clearAllExamRecordsAPI, 
		getExamStatisticsAPI 
	} from '@/services/exam-records';
	import { getAllTechnologiesAPI } from '@/services/technologies';
	// 移除缓存相关导入，直接使用本地数据
	import { getThemeStyles } from '@/stores/theme';
	import type { ExamRecord, Technology } from '@/types';

	/**
	 * 测试记录列表
	 */
	const records = ref<ExamRecord[]>([]);

	/**
	 * 刷新状态
	 */
	const refreshing = ref(false);

	/**
	 * 加载状态
	 */
	const loading = ref(false);

	/**
	 * 技术栈列表
	 */
	const technologies = ref<Technology[]>([]);

	/**
	 * 根据技术栈代码获取图标（本地方法，替代缓存）
	 * @param techCode 技术栈代码
	 * @param defaultIcon 默认图标
	 * @returns 技术栈图标
	 */
	const getTechIcon = (techCode: string, defaultIcon: string = '📚'): string => {
		const tech = technologies.value.find(t => t.code === techCode);
		return tech?.icon || defaultIcon;
	};

	/**
	 * 主题样式（响应式）
	 */
	const themeStyles = computed(() => getThemeStyles());

	/**
	 * 容器样式
	 */
	const containerStyle = computed(() => ({
		background: themeStyles.value.bgPrimary,
		transition: 'background-color 0.3s ease'
	}));

	/**
	 * 安全距离（顶部内边距 = 安全区域 + 基础间距）
	 */
	const safeDistance = computed(() => (uni.getSystemInfoSync().safeAreaInsets?.top || 0) + 20);

	/**
	 * 统计信息
	 */
	const statistics = ref({
		totalCount: 0,
		averageScore: 0,
		bestScore: 0,
		averageAccuracy: 0
	});

	/**
	 * 按难度统计
	 */
	const difficultyStats = computed(() => {
		const stats = {
			easy: { total: 0, correct: 0 },
			medium: { total: 0, correct: 0 },
			hard: { total: 0, correct: 0 }
		};

		records.value.forEach(record => {
			if (record.easyCount) {
				stats.easy.total += record.easyCount;
				stats.easy.correct += record.easyCorrect || 0;
			}
			if (record.mediumCount) {
				stats.medium.total += record.mediumCount;
				stats.medium.correct += record.mediumCorrect || 0;
			}
			if (record.hardCount) {
				stats.hard.total += record.hardCount;
				stats.hard.correct += record.hardCorrect || 0;
			}
		});

		return stats;
	});

	/**
	 * 按题型统计
	 */
	const typeStats = computed(() => {
		const stats = {
			single: { total: 0, correct: 0 },
			multiple: { total: 0, correct: 0 }
		};

		records.value.forEach(record => {
			if (record.singleCount) {
				stats.single.total += record.singleCount;
				stats.single.correct += record.singleCorrect || 0;
			}
			if (record.multipleCount) {
				stats.multiple.total += record.multipleCount;
				stats.multiple.correct += record.multipleCorrect || 0;
			}
		});

		return stats;
	});

	/**
	 * 获取难度统计进度百分比
	 */
	const getDifficultyProgress = (difficulty: string): number => {
		const stats = difficultyStats.value;
		const stat = stats[difficulty as keyof typeof stats];
		return stat.total > 0 ? Math.round((stat.correct / stat.total) * 100) : 0;
	};

	/**
	 * 获取难度统计正确率
	 */
	const getDifficultyAccuracy = (difficulty: string): number => {
		return getDifficultyProgress(difficulty);
	};

	/**
	 * 获取题型统计进度百分比
	 */
	const getTypeProgress = (type: string): number => {
		const stats = typeStats.value;
		const stat = stats[type as keyof typeof stats];
		return stat.total > 0 ? Math.round((stat.correct / stat.total) * 100) : 0;
	};

	/**
	 * 获取题型统计正确率
	 */
	const getTypeAccuracy = (type: string): number => {
		return getTypeProgress(type);
	};


	/**
	 * 页面显示时加载记录
	 */
	onShow(async () => {
		await loadRecords();
	});

	/**
	 * 加载测试记录
	 */
	const loadRecords = async (showLoading: boolean = false) => {
		try {
			if (showLoading) {
				loading.value = true;
			}

			// 并行获取记录列表、统计信息和技术栈数据
			const [recordsRes, statsRes, techRes] = await Promise.all([
				getExamRecordsAPI(),
				getExamStatisticsAPI(),
				getAllTechnologiesAPI()
			]);

			// 处理记录列表
			records.value = recordsRes.data || [];

			// 处理统计信息
			statistics.value = statsRes.data || {
					totalCount: 0,
					averageScore: 0,
					bestScore: 0,
					averageAccuracy: 0
				};

			// 处理技术栈数据
			technologies.value = techRes.data || [];
			technologies.value.forEach((tech) => {
				tech.tagsArray = tech.tags.split(',');
			});
			// 不再需要设置缓存，直接使用本地数据
		} catch (error) {
			console.error('加载考试记录失败:', error);
			records.value = [];
			uni.showToast({
				title: '加载数据失败',
				icon: 'none',
				duration: 2000
			});
		} finally {
			if (showLoading) {
				loading.value = false;
			}
		}
	};



	/**
	 * 获取分数样式类
	 */
	const getScoreClass = (score: number): string => {
		if (score >= 90) return 'score-excellent';
		if (score >= 80) return 'score-good';
		if (score >= 60) return 'score-normal';
		return 'score-poor';
	};

	/**
	 * 格式化时间
	 */
	const formatTime = (seconds: number): string => {
		const mins = Math.floor(seconds / 60);
		const secs = seconds % 60;
		return `${mins}'${secs}"`;
	};

	/**
	 * 判断是否显示详细统计
	 */
	const showDetailedStats = (record: any): boolean => {
		return !!(record.easyCount || record.mediumCount || record.hardCount || 
				 record.singleCount || record.multipleCount);
	};

	/**
	 * 删除记录
	 */
	const handleDelete = async (id: number) => {
		uni.showModal({
			title: '确认删除',
			content: '确定要删除这条记录吗？',
			success: async (res) => {
				if (res.confirm) {
					try {
						const result = await deleteExamRecordAPI(id);
						if (result.code === '0') {
							await loadRecords();
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							});
						} else {
							uni.showToast({
								title: result.msg || '删除失败',
								icon: 'none'
							});
						}
					} catch (error) {
						console.error('删除记录失败:', error);
						uni.showToast({
							title: '删除失败',
							icon: 'none'
						});
					}
				}
			}
		});
	};

	/**
	 * 清空所有记录
	 */
	const handleClearAll = async () => {
		uni.showModal({
			title: '确认清空',
			content: '确定要清空所有记录吗？此操作不可恢复',
			success: async (res) => {
				if (res.confirm) {
					try {
						const result = await clearAllExamRecordsAPI();
						if (result.code === '0') {
							await loadRecords();
							uni.showToast({
								title: '清空成功',
								icon: 'success'
							});
						} else {
							uni.showToast({
								title: result.msg || '清空失败',
								icon: 'none'
							});
						}
					} catch (error) {
						console.error('清空记录失败:', error);
						uni.showToast({
							title: '清空失败',
							icon: 'none'
						});
					}
				}
			}
		});
	};





	/**
	 * 查看记录详情（跳转到结果页）
	 */
	const handleViewRecord = (record: ExamRecord) => {
		// 跳转到结果页，传递记录信息
		uni.navigateTo({
			url: `/pages/exam-records/result?score=${record.score}&correctCount=${record.correctCount}&totalCount=${record.totalCount}&accuracy=${record.accuracy}&timeUsed=${record.timeUsed}&techCode=${record.techCode}&categories=${record.categories}&recordId=${record.id}`
		});
	};

	/**
	 * 下拉刷新
	 */
	const handleRefresh = async () => {
		refreshing.value = true;
		try {
			await loadRecords();
			setTimeout(() => {
				refreshing.value = false;
			}, 300);
		} catch (error) {
			console.error('[History Page] 刷新失败:', error);
			refreshing.value = false;
			uni.showToast({
			title: '刷新失败，请重试',
			icon: 'none',
			duration: 2000
		});
		}
	};

	/**
	 * 去测试页面
	 */
	const handleGoToExam = () => {
		uni.switchTab({
			url: '/pages/exam-records/index'
		});
	};
</script>

<style lang="scss" scoped>
	// 默认样式 - 渐变主题
	.history-container {
		min-height: 100vh;
		background: v-bind('themeStyles.bgPrimary');
		padding-bottom: 40rpx;
	}

	/**
	 * 顶部标题栏
	 */
	.header {
		width: 100%;
		padding-left: 32rpx;
		padding-right: 32rpx;
		padding-bottom: 32rpx;
		background: v-bind('themeStyles.bgPrimary');
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: v-bind('themeStyles.headerShadow');
		position: relative;
		z-index: 10;
		box-sizing: border-box;
	}

	.header-content {
		flex: 1;
		padding-right: 20rpx;
	}

	.header-actions {
		display: flex;
		align-items: center;
		gap: 12rpx;
	}

	.header-title {
		font-size: 48rpx;
		font-weight: 900;
		color: v-bind('themeStyles.textPrimary');
		display: block;
		margin-bottom: 8rpx;
		background: v-bind('themeStyles.primaryGradient');
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}

	.header-subtitle {
		font-size: 30rpx;
		color: v-bind('themeStyles.textSecondary');
		font-weight: 500;
	}

	.stats-badge {
		padding: 12rpx 24rpx;
		background: v-bind('themeStyles.primaryGradient');
		border-radius: 100rpx;
		box-shadow: v-bind('themeStyles.buttonShadow');
	}

	.stats-text {
		font-size: 28rpx;
		font-weight: 700;
		color: white;
	}

	.clear-btn-header {
		width: 64rpx;
		height: 64rpx;
		background: v-bind('themeStyles.dangerGradient');
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: v-bind('themeStyles.dangerShadow');
		transition: all 0.3s ease;
		flex-shrink: 0;

		&:active {
			transform: scale(0.9);
		}
	}

	.clear-icon-header {
		font-size: 32rpx;
		filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
	}

	/**
	 * 统计区域
	 */
	.stats-section {
		flex-shrink: 0;
		padding: 24rpx 24rpx 0;
	}

	/**
	 * 数据管理区域
	 */
	.data-management-section {
		margin-bottom: 24rpx;
	}

	.data-management-card {
		background: v-bind('themeStyles.bgCard');
		border-radius: 28rpx;
		padding: 32rpx;
		box-shadow: v-bind('themeStyles.cardShadow');
	}

	.data-management-header {
		margin-bottom: 24rpx;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid v-bind('themeStyles.borderColor');
	}

	.data-management-title {
		font-size: 32rpx;
		font-weight: 900;
		color: v-bind('themeStyles.textPrimary');
		display: block;
		margin-bottom: 8rpx;
	}

	.data-management-desc {
		font-size: 28rpx;
		color: v-bind('themeStyles.textSecondary');
		font-weight: 500;
	}

	.data-management-buttons {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.clear-data-btn {
		width: 100%;
		padding: 24rpx;
		border-radius: 16rpx;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.97);
		}
	}

	.clear-exam-btn {
		background: v-bind('themeStyles.primaryGradient');
		box-shadow: v-bind('themeStyles.buttonShadow');
	}

	.clear-wrong-btn {
		background: v-bind('themeStyles.dangerGradient');
		box-shadow: v-bind('themeStyles.dangerShadow');
	}

	.clear-all-btn {
		background: v-bind('themeStyles.warningGradient');
		box-shadow: v-bind('themeStyles.warningShadow');
	}

	.clear-btn-icon {
		font-size: 32rpx;
		filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
	}

	.clear-btn-text {
		font-size: 32rpx;
		font-weight: 700;
		color: white;
		text-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.2);
	}

	.stats-card {
		background: v-bind('themeStyles.bgCard');
		border: 1rpx solid v-bind('themeStyles.borderColor');
		border-radius: 28rpx;
		padding: 32rpx;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 16rpx;
		box-shadow: v-bind('themeStyles.cardShadow');
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8rpx;
	}

	.stat-icon {
		font-size: 36rpx;
		filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
	}

	.stat-label {
		font-size: 26rpx;
		color: v-bind('themeStyles.textSecondary');
		font-weight: 600;
		text-align: center;
	}

	.stat-value {
		font-size: 36rpx;
		font-weight: 900;
		color: v-bind('themeStyles.textPrimary');
		
		&.highlight {
			color: v-bind('themeStyles.primaryColor');
		}
	}

	/**
	 * 记录列表
	 */
	.records-section {
		padding: 0 24rpx 20rpx;
	}

	.records-list {
		display: flex;
		flex-direction: column;
	}

	// 记录卡片 - 默认渐变主题
	.record-card {
		border-radius: 20rpx;
		overflow: hidden;
		position: relative;
		background: v-bind('themeStyles.bgCard');
		box-shadow: v-bind('themeStyles.cardShadow');
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		border: 2rpx solid v-bind('themeStyles.borderColor');
		margin-bottom: 16rpx;

		&:hover {
			transform: translateY(-4rpx);
			box-shadow: v-bind('themeStyles.hoverShadow');
			border-color: v-bind('themeStyles.primaryColor');
		}

		&:active {
			transform: translateY(-2rpx);
			border-color: v-bind('themeStyles.primaryColor');
		}
	}

	.card-body {
		padding: 24rpx;
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	/**
	 * 卡片头部
	 */
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.header-left {
		display: flex;
		align-items: center;
		gap: 12rpx;
		flex: 1;
	}

	.header-right {
		display: flex;
		align-items: center;
		gap: 12rpx;
	}

	.score-display {
		display: flex;
		align-items: baseline;
		gap: 4rpx;
	}

	.score-number {
		font-size: 32rpx;
		font-weight: 700;
		color: v-bind('themeStyles.textPrimary');

		&.excellent {
			background: linear-gradient(135deg, #22c55e, #16a34a);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
		}

		&.good {
			background: v-bind('themeStyles.primaryGradient');
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
		}

		&.average {
			background: linear-gradient(135deg, #f59e0b, #d97706);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
		}

		&.poor {
			background: linear-gradient(135deg, #ef4444, #dc2626);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
		}
	}

	.score-label {
		font-size: 24rpx;
		color: v-bind('themeStyles.textSecondary');
		font-weight: 500;
	}

	/* 主要信息区域 */
	.main-info {
		background: v-bind('themeStyles.bgSecondary');
		border-radius: 12rpx;
		padding: 16rpx;
		border: 1rpx solid v-bind('themeStyles.borderColor');
	}

	.info-row {
		display: flex;
		justify-content: space-between;
		gap: 12rpx;
	}

	.info-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4rpx;
	}

	.info-label {
		font-size: 22rpx;
		color: v-bind('themeStyles.textSecondary');
		font-weight: 500;
	}

	.info-value {
		font-size: 26rpx;
		font-weight: 600;
		color: v-bind('themeStyles.textPrimary');
	}

	/* 答题统计 */
	.answer-stats {
		background: v-bind('themeStyles.bgSecondary');
		border-radius: 12rpx;
		padding: 16rpx;
		border: 1rpx solid v-bind('themeStyles.borderColor');
	}

	.stats-row {
		display: flex;
		gap: 16rpx;
	}

	.stat-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8rpx;
	}

	.stat-icon-wrapper {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: v-bind('themeStyles.buttonBoxShadow');

		&.correct-bg {
			background: linear-gradient(135deg, #4ade80, #22c55e);
		}

		&.wrong-bg {
			background: linear-gradient(135deg, #f87171, #ef4444);
		}
	}

	.stat-icon {
		font-size: 20rpx;
		color: white;
		font-weight: 700;
	}

	.stat-count {
		font-size: 28rpx;
		font-weight: 700;
		color: v-bind('themeStyles.textPrimary');
	}

	.stat-label {
		font-size: 22rpx;
		color: v-bind('themeStyles.textSecondary');
		font-weight: 500;
	}

	/* 详细统计区域 */
	.detailed-stats-section {
		background: v-bind('themeStyles.bgSecondary');
		border-radius: 12rpx;
		padding: 16rpx;
		border: 1rpx solid v-bind('themeStyles.borderColor');
	}

	.detail-title {
		text-align: center;
		margin-bottom: 12rpx;
		padding-bottom: 8rpx;
		border-bottom: 1rpx solid v-bind('themeStyles.borderColor');
	}

	.detail-title-text {
		font-size: 24rpx;
		font-weight: 600;
		color: v-bind('themeStyles.textPrimary');
	}

	.detail-grid {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.detail-group {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.group-title {
		font-size: 22rpx;
		font-weight: 600;
		color: v-bind('themeStyles.textSecondary');
		margin-bottom: 4rpx;
	}

	.group-items {
		display: flex;
		flex-wrap: wrap;
		gap: 8rpx;
	}

	.detail-item {
		display: flex;
		align-items: center;
		gap: 6rpx;
		background: v-bind('themeStyles.bgCard');
		border-radius: 8rpx;
		padding: 8rpx 12rpx;
		border: 1rpx solid v-bind('themeStyles.borderColor');
		min-width: 120rpx;

		&.easy {
			border-left: 3rpx solid #22c55e;
		}

		&.medium {
			border-left: 3rpx solid #f59e0b;
		}

		&.hard {
			border-left: 3rpx solid #ef4444;
		}

		&.single {
			border-left: 3rpx solid #3b82f6;
		}

		&.multiple {
			border-left: 3rpx solid #8b5cf6;
		}
	}

	.item-icon {
		font-size: 20rpx;
	}

	.item-label {
		font-size: 22rpx;
		color: v-bind('themeStyles.textSecondary');
		font-weight: 500;
	}

	.item-value {
		font-size: 22rpx;
		font-weight: 600;
		color: v-bind('themeStyles.textPrimary');
		margin-left: auto;
	}

	.record-icon-wrapper {
		width: 80rpx;
		height: 80rpx;
		background: v-bind('themeStyles.primaryGradient');
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: v-bind('themeStyles.buttonBoxShadow');
		border: 1rpx solid v-bind('themeStyles.borderColor');
		flex-shrink: 0;
	}

	.record-icon {
		font-size: 48rpx;
		color: white;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
		filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
	}

	.record-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 6rpx;
		min-width: 0;
	}

	.record-tech {
		font-size: 40rpx;
		font-weight: 900;
		color: v-bind('themeStyles.textPrimary');

		line-height: 1.2;
		text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
		letter-spacing: 1rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.record-time {
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.9);
		font-weight: 600;
		text-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
	}

	.delete-btn {
		width: 64rpx;
		height: 64rpx;
		background: v-bind('themeStyles.bgTertiary');
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: v-bind('themeStyles.buttonBoxShadow');
		border: 1rpx solid v-bind('themeStyles.borderColor');
		transition: all 0.3s ease;
		flex-shrink: 0;

		&:hover {
			background: linear-gradient(135deg, #f87171, #ef4444);
			transform: scale(1.05);
		}

		&:active {
			transform: scale(0.95);
			background: linear-gradient(135deg, #dc2626, #b91c1c);
		}
	}

	.delete-icon {
		font-size: 32rpx;
		color: v-bind('themeStyles.textSecondary');
		transition: color 0.3s ease;
	}

	/**
	 * 分数区域
	 */
	.score-section {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20rpx;
	}

	.score-badge {
		padding: 16rpx 32rpx;
		border-radius: 50rpx;
		display: flex;
		align-items: baseline;
		gap: 6rpx;
		box-shadow: v-bind('themeStyles.scoreShadow');
		border: 3rpx solid rgba(255, 255, 255, 0.5);
	}

	.score-excellent {
		background: v-bind('themeStyles.successGradient');
	}

	.score-good {
		background: v-bind('themeStyles.primaryGradient');
	}

	.score-normal {
		background: v-bind('themeStyles.warningGradient');
	}

	.score-poor {
		background: v-bind('themeStyles.dangerGradient');
	}

	.score-value {
		font-size: 48rpx;
		font-weight: 900;
		color: white;
		text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
	}

	.score-unit {
		font-size: 24rpx;
		color: white;
		font-weight: 700;
		text-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
	}

	.score-info {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
		align-items: flex-end;
	}

	.info-text {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.95);
		font-weight: 700;
		text-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.3);
	}

	/**
	 * 统计概览区域
	 */
	.stats-section {
		padding: 0 24rpx 24rpx;
	}

	/* 主要统计 */
	.main-stats {
		background: v-bind('themeStyles.bgCard');
		border-radius: 16rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
		box-shadow: v-bind('themeStyles.cardBoxShadow');
		border: 1rpx solid v-bind('themeStyles.borderColor');
	}

	.stats-header {
		text-align: center;
		margin-bottom: 20rpx;
	}

	.stats-title {
		font-size: 32rpx;
		font-weight: 700;
		color: v-bind('themeStyles.textPrimary');
	}

	.stats-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 16rpx;
	}

	.stat-card {
		background: v-bind('themeStyles.bgSecondary');
		border-radius: 12rpx;
		padding: 20rpx;
		display: flex;
		align-items: center;
		gap: 16rpx;
		border: 1rpx solid v-bind('themeStyles.borderColor');
		transition: all 0.3s ease;

		&:hover {
			transform: translateY(-2rpx);
			box-shadow: v-bind('themeStyles.hoverShadow');
		}

		&.highlight {
			background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(147, 51, 234, 0.1));
			border-color: v-bind('themeStyles.primaryColor');
		}
	}

	.stat-icon {
		font-size: 32rpx;
		width: 48rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: v-bind('themeStyles.primaryGradient');
		border-radius: 50%;
		flex-shrink: 0;
		box-shadow: v-bind('themeStyles.buttonBoxShadow');
		color: white;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
	}

	.stat-info {
		flex: 1;
	}

	.stat-number {
		font-size: 32rpx;
		font-weight: 700;
		color: v-bind('themeStyles.textPrimary');
		display: block;
		line-height: 1.2;
	}

	.stat-label {
		font-size: 24rpx;
		color: v-bind('themeStyles.textSecondary');
		font-weight: 500;
		margin-top: 4rpx;
	}

	/* 详细统计区域 */
	.detail-stats {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.stats-card {
		background: v-bind('themeStyles.bgCard');
		border-radius: 16rpx;
		padding: 20rpx;
		box-shadow: v-bind('themeStyles.cardBoxShadow');
		border: 1rpx solid v-bind('themeStyles.borderColor');
		//分为行
		display: flex;
		flex-direction: row;
	}

	.card-title {
		margin-bottom: 16rpx;
		text-align: center;
	}

	.title-text {
		font-size: 28rpx;
		font-weight: 700;
		color: v-bind('themeStyles.textPrimary');
	}

	/* 难度统计样式 */
	.difficulty-list {
		display: flex;
		flex-direction: column;
		gap: 12rpx;
	}

	.difficulty-row {
		background: v-bind('themeStyles.bgSecondary');
		border-radius: 12rpx;
		padding: 16rpx;
		border: 1rpx solid v-bind('themeStyles.borderColor');
		display: flex;
		align-items: center;
		gap: 16rpx;
		transition: all 0.3s ease;

		&:hover {
			transform: translateY(-1rpx);
			box-shadow: v-bind('themeStyles.hoverShadow');
		}

		&.easy {
			border-left: 4rpx solid #22c55e;
		}

		&.medium {
			border-left: 4rpx solid #f59e0b;
		}

		&.hard {
			border-left: 4rpx solid #ef4444;
		}
	}

	.difficulty-info {
		display: flex;
		align-items: center;
		gap: 8rpx;
		min-width: 120rpx;
	}

	.difficulty-icon {
		font-size: 20rpx;
	}

	.difficulty-name {
		font-size: 26rpx;
		font-weight: 600;
		color: v-bind('themeStyles.textPrimary');
	}

	.difficulty-stats {
		display: flex;
		align-items: center;
		gap: 12rpx;
		min-width: 120rpx;
	}

	.difficulty-count {
		font-size: 24rpx;
		font-weight: 600;
		color: v-bind('themeStyles.textPrimary');
	}

	.difficulty-rate {
		font-size: 26rpx;
		font-weight: 700;
		color: v-bind('themeStyles.primaryColor');
	}

	.progress-container {
		flex: 1;
	}

	.progress-bar {
		height: 6rpx;
		background: v-bind('themeStyles.bgPrimary');
		border-radius: 3rpx;
		overflow: hidden;
	}

	.progress-fill {
		height: 100%;
		border-radius: 3rpx;
		transition: width 0.8s ease;

		&.easy-color {
			background: linear-gradient(135deg, #4ade80, #22c55e);
		}

		&.medium-color {
			background: linear-gradient(135deg, #fbbf24, #f59e0b);
		}

		&.hard-color {
			background: linear-gradient(135deg, #f87171, #ef4444);
		}
	}

	/* 题型统计样式 */
	.type-grid {
		display: flex;
		gap: 16rpx;
	}

	.type-item {
		flex: 1;
		background: v-bind('themeStyles.bgSecondary');
		border-radius: 12rpx;
		padding: 20rpx;
		border: 1rpx solid v-bind('themeStyles.borderColor');
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12rpx;
		transition: all 0.3s ease;

		&:hover {
			transform: translateY(-2rpx);
			box-shadow: v-bind('themeStyles.hoverShadow');
		}
	}

	.type-header {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.type-icon {
		font-size: 24rpx;
	}

	.type-name {
		font-size: 26rpx;
		font-weight: 600;
		color: v-bind('themeStyles.textPrimary');
	}

	.type-count {
		font-size: 24rpx;
		font-weight: 600;
		color: v-bind('themeStyles.textPrimary');
		text-align: center;
	}

	.type-rate {
		font-size: 28rpx;
		font-weight: 700;
		color: v-bind('themeStyles.primaryColor');
		text-align: center;
	}

	.type-progress {
		width: 100%;
		height: 6rpx;
		background: v-bind('themeStyles.bgPrimary');
		border-radius: 3rpx;
		overflow: hidden;
	}

	.type-progress-fill {
		height: 100%;
		border-radius: 3rpx;
		transition: width 0.8s ease;

		&.single-color {
			background: linear-gradient(135deg, #3b82f6, #1d4ed8);
		}

		&.multiple-color {
			background: linear-gradient(135deg, #8b5cf6, #7c3aed);
		}
	}






	/* 记录详细统计 */
	.detailed-record-stats {
		margin-top: 12rpx;
		padding-top: 12rpx;
		border-top: 1rpx solid rgba(255, 255, 255, 0.2);
	}

	.stats-row-mini {
		display: flex;
		gap: 8rpx;
		flex-wrap: wrap;
	}

	.stat-mini {
		display: flex;
		align-items: center;
		gap: 4rpx;
		padding: 4rpx 8rpx;
		background: rgba(255, 255, 255, 0.15);
		border-radius: 8rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.2);
	}

	.stat-mini-label {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.8);
		font-weight: 600;
	}

	.stat-mini-value {
		font-size: 24rpx;
		font-weight: 800;
		color: white;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
	}

	/**
	 * 空状态
	 */
	.empty-state {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: 24rpx 24rpx 0;
		overflow-y: auto;
		height: 0;
	}

	.empty-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		padding: 120rpx 32rpx;
	}

	.empty-icon {
		font-size: 160rpx;
		margin-bottom: 32rpx;
		filter: drop-shadow(0 4rpx 12rpx rgba(0, 0, 0, 0.1));
	}

	.empty-text {
		font-size: 44rpx;
		font-weight: 900;
		color: v-bind('themeStyles.textPrimary');
		margin-bottom: 16rpx;
	}

	.empty-tip {
		font-size: 32rpx;
		color: v-bind('themeStyles.textSecondary');
		margin-bottom: 48rpx;
		line-height: 1.6;
	}

	.empty-btn {
		padding: 24rpx 48rpx;
		background: v-bind('themeStyles.primaryGradient');
		border-radius: 50rpx;
		border: none;
		box-shadow: v-bind('themeStyles.buttonShadow');
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.97);
		}
	}

	.btn-text {
		font-size: 32rpx;
		font-weight: 700;
		color: white;
	}

	// 白色主题文字和元素样式
	.history-container[data-theme="light"] {
		.record-tech {
			color: v-bind('themeStyles.textPrimary');
			text-shadow: none;
		}

		.record-time {
			color: v-bind('themeStyles.textSecondary');
			text-shadow: none;
		}

		.score-value {
			color: v-bind('themeStyles.textPrimary');
		}

		.score-unit {
			color: v-bind('themeStyles.textSecondary');
		}

		.info-text {
			color: v-bind('themeStyles.textSecondary');
			text-shadow: none;
		}

		.stat-badge {
			background: v-bind('themeStyles.bgTertiary');
			border-color: v-bind('themeStyles.borderColor');
			backdrop-filter: none;
			box-shadow: none;
		}

		.stat-text {
			color: v-bind('themeStyles.textPrimary');
			text-shadow: none;
		}

		.record-icon-wrapper {
			background: v-bind('themeStyles.bgTertiary');
			border-color: v-bind('themeStyles.borderColor');
			box-shadow: none;
		}

		.delete-btn {
			background: v-bind('themeStyles.bgTertiary');
			border-color: v-bind('themeStyles.borderColor');
			box-shadow: none;

			&:active {
				background: v-bind('themeStyles.bgSecondary');
			}
		}
	}

	/**
	 * 底部占位
	 */
	.bottom-placeholder {
		height: 120rpx;
	}
</style>

